<template>
  <div class="event-high-type">
    <split-line text="事件高发类型" icon @iconclick="showEventList">
      <month-select @change="onChangeDateSelect" />
    </split-line>
    <line-rate-group
      :data-list="dataList"
      :strokeColor="{
        '0%': '#10191f',
        '100%': '#6EFFF4',
      }"
      slipper-color="#6efff4"
      style="margin-top: 24px"
    >
      <template #title="{ title }">
        <span>{{ title }}</span>
      </template>
    </line-rate-group>
  </div>
</template>

<script>
import LineRateGroup from '@/components/line-rate-group';
import SplitLine from '@/components/split-line.vue';
import MonthSelect from '@/components/month-select';
import { replaceFields } from '@gis/lib/utils';
import { useUserInfoStore } from '@gis/lib/pinia/userInfo.js';
export default {
  name: 'event-high-type',
  components: { MonthSelect, SplitLine, LineRateGroup },
  data() {
    return {
      year: '',
      month: '',
      dataList: [],
      fieldsMap: { label: 'name' },
    };
  },
  computed: {
    areaCode() {
      const { area_code } = useUserInfoStore();
      return area_code;
    },
    apiParams() {
      return {
        area_code: this.areaCode,
        year: this.year,
        month: this.month,
      };
    },
  },
  watch: {
    apiParams: {
      immediate: true,
      handler() {
        this.getDataAsync();
      },
    },
  },
  created() {
    this.getDataAsync();
  },
  methods: {
    onChangeDateSelect(data) {
      this.year = data.year;
      this.month = data.year === data.date ? '' : data.date;
    },
    async getDataAsync() {
      const params = this.apiParams;
      if (!params.area_code || !params.year) {
        return;
      }
      const res = await this.$axios.get('/xw-microservice/xw-analysis/v3/event/count/type', { params });
      // var res = {
      //   data: [
      //     { name: "社会治安", value: 88 },
      //     { name: "消防安全", value: 74 },
      //     { name: "环境保护", value: 51 },
      //     { name: "交通管理", value: 88 },
      //     { name: "教育监督", value: 74 },
      //     { name: "文化出版", value: 51 },
      //     { name: "劳动保障", value: 51 },
      //   ],
      // };
      this.setDataList(res.data.splice(0, 7));
    },
    setDataList(data = []) {
      this.dataList = replaceFields(data, this.fieldsMap);
    },
    showEventList() {
      /*dialog({
        content: () => import('@/views/wise-governance/components/event-list-dialog.vue'),
        dialogProps: {
          title: '事件列表',
          width: '1300px',
          bodyStyle: { height: '730px' },
        },
      });*/
    },
  },
};
</script>

<style scoped></style>
